<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>医院陪护服务 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .form-select, .form-input {
      border-radius: 10px;
      border: 1px solid var(--border);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="index.html" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">医院陪护服务</h1>
      <a href="#" class="ml-2">
        <i class="fas fa-question-circle text-lg primary-color"></i>
      </a>
    </div>
    
    <div class="p-4">
      <!-- 表单 -->
      <form>
        <!-- 医院选择 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">选择医院</label>
          <div class="relative">
            <select class="form-select block w-full py-3 px-4 appearance-none">
              <option value="">请选择医院</option>
              <option value="1">第一人民医院</option>
              <option value="2">中心医院</option>
              <option value="3">妇幼保健院</option>
              <option value="4">其他医院</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <i class="fas fa-chevron-down"></i>
            </div>
          </div>
        </div>
        
        <!-- 科室选择 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">选择科室</label>
          <div class="relative">
            <select class="form-select block w-full py-3 px-4 appearance-none">
              <option value="">请选择科室</option>
              <option value="1">内科</option>
              <option value="2">外科</option>
              <option value="3">儿科</option>
              <option value="4">妇产科</option>
              <option value="5">骨科</option>
              <option value="6">其他科室</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <i class="fas fa-chevron-down"></i>
            </div>
          </div>
        </div>
        
        <!-- 床号 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">病房号及床号</label>
          <input type="text" placeholder="请输入床号，例如：6号楼501-3" class="form-input block w-full py-3 px-4">
        </div>
        
        <!-- 服务时间 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">服务开始时间</label>
          <div class="relative">
            <input type="text" placeholder="请选择开始时间" class="form-input block w-full py-3 px-4" readonly>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <i class="fas fa-calendar"></i>
            </div>
          </div>
        </div>
        
        <!-- 服务天数 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">服务天数</label>
          <div class="relative">
            <select class="form-select block w-full py-3 px-4 appearance-none">
              <option value="">请选择服务天数</option>
              <option value="1">1天</option>
              <option value="3">3天</option>
              <option value="7">7天</option>
              <option value="15">15天</option>
              <option value="30">30天</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <i class="fas fa-chevron-down"></i>
            </div>
          </div>
        </div>
        
        <!-- 服务费用 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">服务费用</label>
          <div class="flex justify-between items-center border border-gray-100 rounded-lg p-3 bg-gray-50">
            <span class="text-xl font-bold primary-color">¥398/天</span>
            <button type="button" class="text-sm primary-color">查看费用明细</button>
          </div>
        </div>
        
        <!-- 优惠券 -->
        <div class="mb-5">
          <label class="block text-sm font-medium mb-2">选择优惠券</label>
          <div class="flex justify-between items-center border border-gray-100 rounded-lg p-3 bg-gray-50">
            <span>1张可用</span>
            <button type="button" class="text-sm primary-color flex items-center">
              选择优惠券 <i class="fas fa-chevron-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <!-- 服务说明 -->
        <div class="mb-5">
          <div class="flex items-start">
            <input type="checkbox" id="agree" class="mt-1">
            <label for="agree" class="ml-2 text-xs text-gray-500">我已阅读并同意<a href="#" class="primary-color">《服务条款》</a>和<a href="#" class="primary-color">《隐私政策》</a></label>
          </div>
        </div>
      </form>
      
      <!-- 底部提交按钮 -->
      <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4" style="max-width: 480px; margin: 0 auto;">
        <div class="flex justify-between items-center mb-2">
          <div>
            <span class="text-xs text-gray-500">总计:</span>
            <span class="text-xl font-bold primary-color">¥398</span>
          </div>
          <div class="text-xs text-gray-500">
            预计费用 ≈ ¥398 × 1天
          </div>
        </div>
        <button type="button" class="w-full btn-primary py-3 rounded-lg font-medium">
          提交订单
        </button>
      </div>
      
      <!-- 为底部按钮留出空间 -->
      <div class="pb-28"></div>
    </div>
  </div>

  <!-- 医院选择弹窗 (默认隐藏) -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden" id="hospitalModal">
    <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl max-h-[70vh] overflow-y-auto" style="max-width: 480px; margin: 0 auto;">
      <div class="p-4 border-b border-gray-100">
        <div class="flex justify-between items-center">
          <h3 class="font-medium">选择医院</h3>
          <button class="text-gray-400" onclick="document.getElementById('hospitalModal').classList.add('hidden')">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      
      <div class="p-4">
        <!-- 搜索框 -->
        <div class="mb-4 relative">
          <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
          <input type="text" placeholder="搜索医院" class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg">
        </div>
        
        <!-- 医院列表 -->
        <div class="mb-4">
          <h4 class="text-sm text-gray-500 mb-2">附近医院</h4>
          <div class="space-y-3">
            <div class="p-3 border border-gray-100 rounded-lg flex justify-between items-center">
              <div>
                <p class="font-medium">第一人民医院</p>
                <p class="text-xs text-gray-500 mt-1">距离 1.2km | 市中心</p>
              </div>
              <i class="fas fa-check-circle text-lg primary-color"></i>
            </div>
            
            <div class="p-3 border border-gray-100 rounded-lg">
              <p class="font-medium">中心医院</p>
              <p class="text-xs text-gray-500 mt-1">距离 2.5km | 东城区</p>
            </div>
            
            <div class="p-3 border border-gray-100 rounded-lg">
              <p class="font-medium">妇幼保健院</p>
              <p class="text-xs text-gray-500 mt-1">距离 3.1km | 西城区</p>
            </div>
          </div>
        </div>
        
        <div>
          <h4 class="text-sm text-gray-500 mb-2">其他常用医院</h4>
          <div class="space-y-3">
            <div class="p-3 border border-gray-100 rounded-lg">
              <p class="font-medium">协和医院</p>
              <p class="text-xs text-gray-500 mt-1">南城区</p>
            </div>
            
            <div class="p-3 border border-gray-100 rounded-lg">
              <p class="font-medium">市第二人民医院</p>
              <p class="text-xs text-gray-500 mt-1">北城区</p>
            </div>
            
            <div class="p-3 border border-gray-100 rounded-lg">
              <p class="font-medium">中医院</p>
              <p class="text-xs text-gray-500 mt-1">市中心</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 简单的表单交互
    document.addEventListener('DOMContentLoaded', function() {
      const formSelects = document.querySelectorAll('.form-select');
      formSelects.forEach(select => {
        select.addEventListener('change', function() {
          if (this.value) {
            this.classList.add('text-black');
          } else {
            this.classList.remove('text-black');
          }
        });
      });
    });
  </script>
</body>
</html> 